<template>
	<view class="tab-list flex-row ">
		<view v-for="(v,index) in list" :key="index" :class="['tab-item', current === index ? 'active' : '']"
			@tap="onTapTab(index)">
			<view>{{ v.name }}</view>
		</view>
		<view class="tab-border" :style="{transform: `translateX(${translateX}px) scaleX(0.5)`}"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance,
		onMounted,watch
	} from 'vue'
	const {
		Easing,
		spring,
		shared,
		timing,
		runOnUI,
		runOnJS,
		sequence
	} = wx.worklet
	const translateX = ref(0)


	const props = defineProps({
		list: {
			type: Array,
			default: () => [] // 对象默认值需用函数返回
		},
		current: {
			type: Number,
			default: 0 // 
		},
		tabWidth:{
			type: Number,
			default: 100 // 
		}
	})
	const emit = defineEmits(['onTapTab'])
	watch(()=>props.current,(newVal,oldVal)=>{
		const easing = Easing.ease
		_translateX.value = timing(_tabWidth.value * newVal, {
			duration: 400,
			easing
		})
	})
	
	const update = ()=>{
		
		
	}
	const onTapTab = (i) => {
		console.log('点击tab');
		
		emit('onTapTab', i)
	}

	const {
		globalProperties: global
	} = getCurrentInstance().appContext.config;
	console.log(global, 'global');
	const {
		windowWidth
	} = global.windowInfo
	const innerWindowWidth = windowWidth - 48 // 左右 padding 各 24
	var _tabWidth = shared(innerWindowWidth / 2) // 通过 boundingClientRect 算也行
	var _translateX = shared(0)
	var _lastTranslateX = shared(0)
	var _scaleX = shared(0.3)
	var _windowWidth = shared(windowWidth)
	const scope = getCurrentInstance().proxy.$scope
	const initApplyAnimatedCartStyle = () => {
		scope.applyAnimatedStyle('.tab-border', () => {
			'worklet';
			console.info('scaleRatio@@',_translateX.value);
			// const scaleRatio = (_translateX.value / _tabWidth.value) % 1
			// console.info('scaleRatio',scaleRatio);
			// const changedScale = scaleRatio <= 0.5 ? 0.3 : (1 - scaleRatio) // 最大值 0.5
			// _scaleX.value = Math.abs(changedScale)*0.5 + 0.3
			return {
				transform: `translateX(${_translateX.value}px) scaleX(${_scaleX.value})`,
			}
		}, {
			immediate: true,
			flush: 'async'
		}, (res) => {
			console.log('animatedStyle 已绑定到节点 ', res)

		})
	}
	onMounted(() => {
			initApplyAnimatedCartStyle()
	})
</script>

<style scoped lang="scss">
	.tab-list {
		margin: 5px 24px 0;
		position: relative;
		border-bottom: 1rpx solid #efefef;
	}

	.tab-border {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 3px;
		background-color: #ff0000;
		width: 50%;
		transform: translateX(0) scaleX(0.7);
		z-index: 1;
	}

	.tab-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		flex: 1;
		height: 50px;
		border-bottom: 0.5px solid white;

	}

	.active {
		color: #07c160;
	}
</style>